<template>
  <div class="">
    <div class="w">
      <div class="cc">
        <ul class="vl">
          <li>分类</li>
          <li @click="change(0)">全部</li>
          <li
            v-for="item in list"
            :key="item.category_id"
            @click="change(item.category_id)"
          >
            {{ item.category_name }}
          </li>
        </ul>
        <ul class="smallbox">
          <li v-for="item in shang" :key="item.id" @click="tiao(item)">
            <img :src="item.product_picture" alt="" />
            <p>{{ item.product_name }}</p>
            <p class="pp">{{ item.product_title }}</p>
            <p class="pic">
              {{ item.product_selling_price }} <s>{{ item.product_price }}</s>
            </p>
          </li>
        </ul>
      </div>

      <page
        class="pages"
        @currentChange="currentChange"
        :total="shang.length"
        :page-size="pagesize"
        :page-num="pagenum"
        @sizeChange="sizeChange"
      ></page>
    </div>
  </div>
</template>

<script>
import page from "@/components/page.vue";
export default {
  data() {
    return {
      list: [],
      shang: [],
      pagenum: 1,
      pagesize: 15,
    };
  },
  mounted() {
    this.$axios.post("/product/getCategory").then((res) => {
      console.log(res);
      this.list = res.data.category;
    });
    this.change(1);
  },
  methods: {
    tiao(item) {
      this.$router.push({ path: "/xiang", query: { obj: item } });
    },
    change(id) {
      this.$http("/product/getAllProduct", "post", {
        categoryID: [id],
        currentPage: 1,
        // pageSize: 15,
      }).then((res) => {
        console.log(res);
        if (id == 0) {
          this.shang = res.data.Product;
        } else {
          this.shang = res.data.Product.filter((item) => {
            return id == item.category_id;
          });
        }
      });
      // this.$store.commit("change", id);
    },
    currentChange(val) {
      this.pagenum = val;
    },
    sizeChange(size) {
      this.pagesize = size;
    },
  },
  components: {
    page,
  },
  computed: {
    pagelist() {
      return this.shang.slice(
        (this.pagenum - 1) * this.pagesize,
        this.pagenum * this.pagesize
      );
    },
  },
};
</script>

<style lang='scss'>
.vl {
  width: 70%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  justify-content: center;
  li {
    flex: 1;
    text-align: center;
    border: 1px solid gray;
    color: steelblue;
  }
}
.smallbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-direction: normal;
  li {
    display: inline-block;
    width: 18%;
    margin-left: 10px;
    margin-top: 10px;
    background-color: white;
    font-size: 16px;
    text-align: center;
    transition: all 0.2s linear;
    position: relative;
    img {
      width: 100%;
    }
  }
}
.pp {
  color: gray;
  font-size: 14px;
}
s {
  color: gray;
  font-size: 14px;
}
.pic {
  color: orangered;
}
.pages {
  font-size: 16px;
}
</style>
